<!--
 * @Descripttion: 
 * @Author: linzisong
 * @Date: 2021-07-01 16:44:13
 * @LastEditors: linzisong
 * @LastEditTime: 2021-07-08 17:36:26
-->
<template>
  <div class="container_main_body">
    <div class="no-list" v-show="listData.length === 0">
      从左侧拖拽来添加字段
    </div>
    <el-form
      ref="showForm"
      class="container_main_body_form"
      :inline="data.config.inline"
      :label-position="data.config.labelPosition"
      :label-width="data.config.labelWidth + 'px'"
      :size="data.config.size"
    >
      <draggable
        tag="div"
        class="draggable-box"
        v-bind="{
          group: 'form-draggable',
          ghostClass: 'moving',
          animation: 180,
          handle: '.drag-move',
        }"
        v-model="listData"
        @add="addListData"
      >
        <transition-group tag="div" name="list-fade" class="list-main">
          <layout-item
            class="drag-move"
            v-for="record in listData"
            :key="record.key"
            :record="record"
            :config="data.config"
            :selectItem.sync="selectItem"
            @handleSelectItem="handleSelectItem"
            @handleCopy="handleCopy"
            @handleDelete="handleDelete"
          >
          </layout-item>
          <!-- @dragStart="dragStart" -->
          <!-- @handleDelete="handleDelete" -->
          <!-- @handleColAdd="handleColAdd" -->
          <!-- @handleShowRightMenu="handleShowRightMenu" -->
        </transition-group>
      </draggable>
    </el-form>
  </div>
</template>

<script lang="ts">
import draggable from "vuedraggable";
import { Component, Vue, Prop } from "vue-property-decorator";
import {
  dataType,
  lsitType,
  customEventType,
  selectItemType,
} from "@/components/FormDesign/config/interfaceConfig";
import LayoutItem from "@/components/FormDesign/mainPage/LayoutItem.vue";

@Component({
  components: {
    draggable,
    LayoutItem,
  },
})
export default class BaseItems extends Vue {
  @Prop({ required: true }) public data!: dataType;
  @Prop({ required: true }) public selectItem!: selectItemType;

  listData: lsitType[] = [];

  created(): void {
    // console.log(this.data);
    // this.data.list.length > 0 && (this.listData = this.data.list)
    this.listData = this.data.list;
    // console.log(this.data)
    // this.arr = this.data;
    // this.arr.push('1')
    // this.arr.push('2')
  }
  addListData(evt: customEventType): void {
    // 深度拷贝
    let index: number = evt.newIndex;
    this.listData[index] = JSON.parse(JSON.stringify(this.listData[index]));

    // 生成model和key值
    const key: string =
      new Date().getTime() + "_" + Math.ceil(Math.random() * 99999);
    const model: string = this.listData[index].type + "_" + key;
    this.$set(this.listData, index, {
      ...this.listData[index],
      key: key,
      model: model,
    });

    // 高亮新生产的表单控件
    this.handleSelectItem(this.listData[index]);
  }
  // dragStart(evt: customEventType, list: lsitType[]): void {
  //   console.log('dragStart...')
  //   // 拖拽结束,自动选择拖拽的控件项
  //   // this.$emit("handleSetSelectItem", list[evt.oldIndex]);
  // }
  handleCopy(): void {
    const traverse = (array: lsitType[]) => {
      array.forEach((element: lsitType, index: number) => {
        if (element.key === this.selectItem.key) {
          // 找到已选择的表单组件，复制添加到选择节点后面
          array.splice(index + 1, 0, element);
          // 重置 key
          const newIndex = index + 1;
          // 生成新的key 和 model
          const key: string =
            new Date().getTime() + "_" + Math.ceil(Math.random() * 99999);
          const model = array[newIndex].type + "_" + key;
          this.$set(this.listData, newIndex, {
            ...this.listData[newIndex],
            key: key,
            model: model,
          });

          // 高亮新生产的表单控件
          this.handleSelectItem(this.listData[newIndex]);
          return;
        }
      });
    };
    traverse(this.listData);
  }
  // handleColAdd(newIndex: number, list: ListType[]): void {

  // }
  handleDelete(): void {
    const traverse = (array: lsitType[]) => {
      array.forEach((element: lsitType, index: number) => {
        if (element.key === this.selectItem.key) {
          // 找到已选择的表单组件,进行删除
          array.splice(index, 1);
          // 控件高亮处理
          // console.log(array.length)
          if (array.length === 0 && index === 0) {
            // 删除首个，且只有一个
            this.$emit("handleSelectItem", "");
          } else if (array.length === index) {
            // 删除最后一个时，往上移动
            this.handleSelectItem(array[index - 1]);
          } else {
            // 其他删除往上移动
            this.handleSelectItem(array[index]);
          }
          return;
        }
      });
    };
    traverse(this.listData);
    console.log(this.listData, "===");
  }
  handleSelectItem(record: lsitType): void {
    this.$emit("handleSelectItem", record);
  }
}
</script>

<style scoped>
</style>